<template>
  <view>
    <!--搜索组件-->
    <my-search @myclick="gotoSearch"></my-search>
    
    <view class="scroll-view-container">
      <!--左侧滑动区域-->
      <scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
        <view
          v-for="(item, index) in itemList" 
          :key="index"
          :class="['left-scroll-view-item', index === activeIndex ? 'active' : '']"
          @click="activeChanged(index)"
        >
        {{ item }}    
        </view>
      </scroll-view>
      <!--右侧滑动区域-->
      <scroll-view scroll-y="true" :style="{height: wh + 'px'}">
        <!-- 根据当前选中的索引显示对应内容 -->
        <view class="content-wrapper">
          
          <template v-if="activeIndex === 0 " >
            <view class="box" v-for="item in zufang" :key="item._id" v-if="item.category===itemList[0]">
              <view class="box-item">{{item.title}}</view>
              <view v-for="(contentItem, contentIndex) in item.content" :key="contentIndex">
                {{ contentIndex + 1 }}. {{ contentItem }}
              </view>
            </view>
          </template>
          
          <template v-if="activeIndex === 1">
            <view class="box" v-for="item in zufang" :key="item._id" v-if="item.category===itemList[1]">
              <view class="box-item">{{item.title}}</view>
              <view v-for="(contentItem, contentIndex) in item.content" :key="contentIndex">
                {{ contentIndex + 1 }}. {{ contentItem }}
              </view>
            </view>
          </template>
          
          <template v-if="activeIndex === 2">
            <view class="box" v-for="item in zufang" :key="item._id" v-if="item.category===itemList[2]">
              <view class="box-item">{{item.title}}</view>
              <view v-for="(contentItem, contentIndex) in item.content" :key="contentIndex">
                {{ contentIndex + 1 }}. {{ contentItem }}
              </view>
            </view>
          </template>
          
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //当前设备可用高度
        wh: 0,
        itemList: ['租房', '买房', '住房装修'],
        zufang:[],
        activeIndex: 0,
        isLoading: true // 新增：加载状态标记
      };
    },
    
    
    onLoad(options){
      // 1. 数据请求前，显示“加载中”提示
      uni.showLoading({
        title: '数据加载中...', // 提示文字
        mask: true // 显示透明遮罩，防止用户误操作
      });
    
      uniCloud.callFunction({
        name:"Cloudzhusu",
        data:{}
      }).then(res =>{
        console.log(res)
        this.zufang = res.result.data
      }).catch(err => {
        // 捕获请求失败的情况，避免提示框一直显示
        console.error('数据请求失败：', err);
      }).finally(() => {
        // 2. 无论请求成功/失败，最终都关闭提示框
        uni.hideLoading();
        this.isLoading = false; // 更新加载状态
      });
      
      
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight - 60;
       // 关键：如果跳转时携带了 activeIndex 参数，就用参数值覆盖默认值
      if (options.activeIndex !== undefined) {
        // 将参数（字符串类型）转为数字类型（与 data 中 activeIndex 类型一致）
        this.activeIndex = Number(options.activeIndex);
      }
    },
    methods: {
      activeChanged(index) {
        this.activeIndex = index
      },
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }  
    },
    
  }
</script>

<style lang="scss">
  .scroll-view-container {
    display: flex;
    
    .left-scroll-view {
      width: 100px;
    }
  }
  .left-scroll-view-item {
    background-color: #F7F7F7;
    line-height :80px;
    text-align: center;
    font-size:15px;
    
    &.active {
      background-color: #FFFFFF;
      position: relative;
      
      &::before {
        content :' ';
        display: block;
        width: 3px;
        height: 40px;
        background-color: #C00000;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }
  .content-wrapper{
    
    font:16px/26px "微软雅黑";
  }
  .content-wrapper .box{
    width:580rpx;
    margin: 0 auto; /* 水平居中关键代码 */
    padding: 5rpx;
    border-radius: 8rpx;
    border:5rpx solid #efefef;
    box-shadow: 1rpx 1rpx 15rpx rgb(190, 190, 190);
  }
  .content-wrapper .box .box-item{
    font:bold 18px/28px "微软雅黑";
    color:red;
    text-align: center;
  }
  

</style>
